<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发布新闻</title>
  <link rel="stylesheet" href="../res/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
  <fieldset class="layui-elem-field layui-field-title">
    <div class="layui-field-box">
      <div class="layui-col-md12 layui-col-sm12 ">
        <form class="layui-form layui-form-pane" lay-filter="formBlogs" id="formBlogs">
          <!--表单控件项：标题，状态-->
          <div class="layui-form-item">
            <label class="layui-form-label">新闻标题:</label>
            <div class="layui-input-inline">
              <input class="layui-input" type="text" name="blogname" id="blogname" lay-verify="required"
                     lay-verType="tips" lay-reqText="请输入新闻标题">
            </div>
          </div>
          <!--表单控件项：居住信息-->
          <div class="layui-form-item">
            <label class="layui-form-label">新闻内容:</label>
            <div class="layui-input-block">
              <input class="layui-input" type="text" name="blogtest" id="blogtest" lay-verify="required"
                     lay-verType="tips" lay-reqText="请输入要发布的新闻内容">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">新闻图片:</label>
            <img class="layui-upload-img" id="ID-upload-demo-img"
                 style="width:92px;height: 92px;border: 1px solid rgba(0,0,0,0.1)">
            <!--表单控件项：文件上传（员工头像）-->
            <button class="layui-btn layui-btn-normal" type="button" id="btnUpdateEmpPhoto">
              <i class="layui-icon layui-icon-upload"></i>
              请上传新闻图片
            </button>
          </div>
          <!-- 提交按钮    -->
          <div class="layui-form-item" style="text-align: right">
            <button type="button" class="layui-btn layui-btn-warm" lay-submit id="addBlogs">确认发布
            </button>
          </div>
        </form>
      </div>
    </div>
  </fieldset>
</div>
<script src="../res/js/config.js"></script>
<script src="../res/layui/layui.js"></script>
<script>
  layui.use(['form', 'layer', 'jquery', 'upload'], function () {
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.jquery;
    //获取文件上传组件
    var upload = layui.upload;
    //日期组件
    var laydate = layui.laydate;
    //对文件上传控件渲染
    upload.render({
      elem: '#btnUpdateEmpPhoto',
      auto: false,  /*禁止文件选择完成之后自动上传*/
      field: 'myfile',  /*设置文件域字段名，后端接口可以根据该字段名得到文件*/
      accept: 'file', /*设置允许上传的文件类型*/
      acceptMime: 'image/*', /*打开文件筛选框时过滤所需的文件（图片）*/
      choose: function (obj) {
        // 预读本地文件示例，不支持ie8
        obj.preview(function (index, file, result) {
          $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
        });
      }
    })
    //为指定的按钮绑定点击事件
    $('#addBlogs').on('click', function () {
      //为表单绑定提交事件
      form.submit('formBlogs', function (data) {
        // "" null --> false
        if (!data.field.myfile) {
          layer.msg('请选择资源文件!');
          return false;
        }
        //发送ajax请求
        //显示加载动画
        let index = layer.load(1);
        //讲表单数据包装成formData对象(含文件)   原生js和jquery
        let formData = new FormData($('#formBlogs')[0])
        $.ajax({
          type: 'post',        //设置请求方式：post提交
          url: `http://localhost:80/blogs/add`,   //服务端接收的地址
          data: formData,       //提交到服务端的数据
          processData: false,   //禁止将提交的数据转换为查询字符串（ key=value&key=value）
          contentType: false,    //配合上述属性，禁止将数据以查询字符串方式提交
          success: function (resp) {
            layer.close(index);
            layer.msg(resp.msg)
          }
        })
        return false;
      })
    })
  })
</script>
</body>
</html>
